import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link ,browserHistory} from 'react-router';
import request from 'superagent';
import api from '../api';
import {bind_change} from '../common/State';
import {  Modal,Icon,message,Table,Dropdown,Menu,Row,Col,Button,Input,InputNumber,Form ,Select,Switch,Upload,DatePicker} from 'antd';
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';
const Option = Select.Option;
const InputGroup = Input.Group;
import Editor from '../common/Editor';
import moment from 'moment';

//导入常量
import {BANNER_POSITION} from '../constants/index';

class HelperArticleEdit extends React.Component {
  constructor(props, context){
      super(props, context);
      let {id} = props.location.query||{};
      this.state={
        article:{
          id
        }
      };
  }

  componentWillMount(){
    let {article} = this.state;
    if(article.id){
      this.doFetch(article.id);
    }
  }

  componentDidMount(){
  
  }

  //通过ID查询
  async doFetch(id){
    let result = await api('/operation/helper/get',{id});
    if(result.cd!=0){
      message.error(result.msg);
      return
    }
    this.setState({
      article:result.data
    })
  }


  //保存事件
  btnSaveClick(event){
      const {validateFieldsAndScroll } = this.props.form;
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          return
        }
        if(values.expired_at){
            values.expired_at = moment(values.expired_at).format('YYYY-MM-DD HH:mm:ss')
        }
        this.save(values)
      })
  }
  //保存请求
  async save(values){
      let {article} = this.state;
      values.status = article.status;
      let params = Object.assign(article,values);
      params.status = params.status==true?'1':'2';

      let result = await api('/operation/helper/save',{article});
      if(result.cd!=0){
        message.error(result.msg);
        return;
      }
      message.success('保存成功',1,() => {
        this.context.router.push('/operation/helper/list')
      });

  }

  render() {
    const { getFieldDecorator} = this.props.form;
    let {article} = this.state;
    return (
        <div>
            <NavBar navs={[
              {title:'帮助文档管理',href:'/operation/helper/list'},
              {title:(article.id?'编辑':'创建')+`帮助文档`}
            ]} />
            <ContentBody className='container'> 
                <h2>帮助文档基本信息</h2>
                <div className='height20'></div>
                <form>
                    <Row gutter={30}>
                      <Col span={12}>
                          <Form.Item 
                            label="文档名称"
                          >
                            {getFieldDecorator('title', {
                              rules: [
                                {
                                  required: true,
                                  message: '请输入文档名称',
                                },
                              ],
                              initialValue:article.title||""
                            })(<Input
                                  placeholder="请输入文档名称"
                                />
                            )}
                          </Form.Item>
                      </Col >
                    </Row>
                    <Row>
                        <Col span={24}>
                          <Form.Item 
                            label="文档正文"
                          >
                            {getFieldDecorator('content', {
                              rules: [
                                {
                                  required: true,
                                  message: '请输入文档正文',
                                },
                              ],
                              initialValue:article.content||""
                            })(<Editor mode={article.id?'edit':'new'} placeholder="请输入文档正文"/>)}
                          </Form.Item>
                      </Col >
                    </Row>
                    <div className='height30'></div>
                    <h2>帮助文档显示设置</h2>
                    <div className='height10'></div>
                    <Row gutter={30}>
                      <Col span={12}>
                          <Form.Item 
                            label="文档排序"
                          >
                            {getFieldDecorator('position', {
                              rules: [
                                {
                                  required: true,
                                  message: '请选择文档排序',
                                },
                              ],
                              initialValue:article.position||""
                            })(
                              <InputNumber style={{width:'100%'}} placeholder="请输入文档排序" />
                            )}
                          </Form.Item>
                      </Col >
                      {/* <Col span={12}>
                          <Form.Item 
                            label="失效时间"
                          >
                            {getFieldDecorator('expired_at', {
                              rules: [
                                {
                                  required: true,
                                  message: '请选择失效时间',
                                },
                              ],
                              initialValue:article.expired_at?moment(article.expired_at):null
                            })(
                                <DatePicker
                                    showTime
                                    style={{width:'100%'}}
                                    format="YYYY-MM-DD HH:mm:ss"
                                    placeholder="请选择失效时间"
                                />
                            )}
                          </Form.Item>
                      </Col > */}
                    </Row>
                    
                    <Row gutter={30}>
                      <Col span={12}>
                        <label >是否开启:</label>
                        <Switch 
                          checkedChildren={'开'} 
                          unCheckedChildren={'关'}
                          checked={article.status==1?true:false} 
                          onChange={(checked)=>{
                            article.status = checked;
                            this.setState({article});
                          }}
                        />
                      </Col >
                      
                    </Row>
                </form>
               
                <div className="text-center ">
                    <Button  
                      type='primary'
                      onClick={this.btnSaveClick.bind(this)}
                    >
                      保存
                    </Button>
                    <Button  
                      type='default'
                      style={{marginLeft:"20px"}} 
                      onClick={()=>{this.context.router.push('/operation/helper/list')}}
                    >
                      返回
                    </Button>
                 </div>
            </ContentBody>
            
        </div>
    );
  }
}
HelperArticleEdit.contextTypes= { router: React.PropTypes.object.isRequired};

export default Form.create()(HelperArticleEdit);
